<!DOCTYPE html>
<html>

<head>
    <title>My Serverless Application</title>
    <style>
        body {
            width: 650px;
            margin: auto;
        }

        h1 {
            text-align: center;
        }

        .resources>h2 {
            margin-bottom: 0;
        }

        .resource>h3,
        .resource>p {
            display: inline-block;
            margin-bottom: 0.5rem;
        }

        .resource>code {
            display: block;
            background-color: #eff0f1;
            color: #393318;
            padding: 5px;
            font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
            white-space: nowrap;
            overflow-x: auto;
        }

        .code-genie-logo {
            display: block;
            width: 10rem;
            margin: auto;
        }

        form {
            margin-bottom: 1rem;
        }

        .form-group {
            padding-bottom: 1rem;
        }

        label {
            display: block;
        }
    </style>
</head>

<body>
    <h1>My Serverless Application</h1><img class="code-genie-logo" src="/api/code-genie-logo">
    <p>Welcome to your Azure Function serverless application. This example application has several resources configured for you to explore. State is stored in memory in a given container, and is therefore ephemeral.</p>
    <section class="resources">
        <h2>Resources</h2>
        <section class="resource">
            <h3><a class="resource-example-link" href="/api/users">GET /users</a></h3>
            <p> &nbsp;Returns a list of all users.</p><code>curl <span><%= apiUrl %></span>/users -H 'accept: application/json'</code>
        </section>
        <section class="resource">
            <h3>POST /users</h3>
            <p> &nbsp;Creates a new user.</p><code>curl <span><%= apiUrl %></span>/api/users -X POST -d '{"name":"Sam"}' -H 'accept: application/json'</code>
        </section>
        <section class="resource">
            <h3><a class="resource-example-link" href="/api/users/1">GET /users/:userId</a></h3>
            <p> &nbsp;Returns a single user.</p><code>curl <span><%= apiUrl %></span>/api/users/1 -H 'accept: application/json'</code>
        </section>
        <section class="resource">
            <h3>PUT /users/:userId</h3>
            <p> &nbsp;Updates an existing user.</p><code>curl <span><%= apiUrl %></span>/api/users/1 -X PUT -d '{"name":"Samantha"}' -H 'accept: application/json'</code>
        </section>
        <section class="resource">
            <h3>DELETE /users/:userId</h3>
            <p> &nbsp;Deletes an existing user.</p><code>curl <span><%= apiUrl %></span>/api/users/1 -X DELETE -H 'accept: application/json'</code>
        </section>
    </section>
    <section class="form">
        <h2>Form</h2>
        <p>Experiment with POST and PUT via the form below. Leave the id empty to create a new user (POST) or enter an id to update a user's name (PUT).</p>
        <form>
            <div class="form-group"><label for="idField">user id</label><input type="text" name="id" id="idField" placeholder="optional"></div>
            <div class="form-group"><label for="nameField">name</label><input type="text" name="name" id="nameField"></div><input type="submit">
        </form>
    </section>
    <script>
        var form = document.querySelector('form')
        form.addEventListener('submit', function(event) {
            event.preventDefault()
            var id = document.getElementById('idField').value
            var name = document.getElementById('nameField').value
            var endpoint = id ? 'users/' + id : 'users'

            if (!window.fetch) {
                alert('Your browser does not have fetch support, which this demo uses. Try again in a modern browser (https://caniuse.com/fetch) or modify the example to use an alternate approach (e.g. XMLHttpRequest or your library of choice.)')
            }

            return fetch(endpoint, {
                method: id ? 'PUT' : 'POST',
                headers: {
                    'content-type': 'application/json'
                },
                body: JSON.stringify({
                    name: name
                })
            })
        })
    </script>
</body>

</html>